// we can add extras SASS here... (we have access to colors from the theme _sass/colors.scss)
// TODO: use color variables here
/***** HEADER *****/

#header {
  padding-top: 23px !important;
  padding-bottom: 23px !important;
  background-color: #fff;
  box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.1);
}

#header.header-scrolled {
  background: #fff;
  box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.1);
}

.navbar a {
  color: $primaryColor !important;
}

.navbar a:hover {
  color: #00AAE1 !important;
}

.navbar li a {
  color: $primaryColor !important;
}

.navbar li a:hover {
  color: #00AAE1 !important;
}

.navbar li a.getstarted {
  color: $primaryColor !important;
}


.navbar li a.getstarted:hover {
  color: #fff !important;
}

.mobile-nav-toggle {
  color: #0aaeb3 !important;
}

.navbar .active {
  font-weight: bold;
}

/***** HEADER *****/


/***** LOGO *****/

.logo img {
  max-height: unset !important;
  width: 200px !important;
}

/***** LOGO *****/


/***** INDEX > HERO SECTION *****/

#hero {
  background: $primaryColor !important;
}

#easter-egg:hover {
  cursor: pointer !important;
  cursor: hand !important;
}

.btn-hero-1 {
  margin-right: 30px !important;
}

/***** INDEX > HERO SECTION *****/


/***** INDEX > HIGHLIGHTS SECTION *****/

#services .row {
  margin-bottom: 30px !important;
}

.image-holder {
  margin-left: 15%;
  margin-top: 4%;
}

.image-holder img {
  max-width: 85%;
}

/***** INDEX > HIGHLIGHTS SECTION *****/


/***** INDEX > CHARTS SECTION *****/
#chart-option {
  background-color: #fff;
  box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.1);
  padding: 50px 30px;
}

.features-header {
  background-color: #F3F5FA;
}

.features-header-col {
  text-align: center;
  vertical-align: middle;
  height: 4rem;
  font-weight: normal;

  @media (min-width: 576px) {
    font-size: 1.5rem;
  }
}

.features-header-name {
  @extend .features-header-col;
}

.features-body > tr:nth-child(even) {
  background-color: #00000004;
}

.features-body-col {
  border-left: 1px solid #37517e40;
}

.features-body-name {
  color: #37517e;
  height: 3rem;

  @media (min-width: 576px) {
    font-size: 1.25rem;
  }
}

.spec {
  text-align: center;
}

.spec .bx-check {
  color: #37517e;
  font-size: 30px;
}

.spec .bx-check.partial {
  color: #D9A700 !important;
}

.spec .bx-check.scheduled {
  color: #D94900 !important;
}

.partial {
  color: #D9A700 !important;
}

.scheduled {
  color: #D94900 !important;
}

.future-support {
  margin-top: 48px;
  text-align: center;
}

.why-us .content {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.why-us .accordion-list {
  padding-left: 0 !important;
}

.why-us .img {
  background-size: 70% 70%;
}

/***** INDEX > CHARTS SECTION *****/


/***** INDEX > GET STARTED *****/
.cta-btn-1 {
  margin-left: 0 !important;
}

.bxl-discord {
  font-size: 24px !important;
}

.bxl-discord:before {
  position: relative;
  top: 3px;
}

.pricing h5 {
  font-size: 30px;
  color: #37517e;
  font-weight: 400;
  font-family: "Jost", sans-serif;
  margin-bottom: 25px;
}

/***** INDEX > GET STARTED *****/


/***** INDEX > NEWS *****/
.excerpt {
  min-height: 168px;
}

/***** INDEX > NEWS *****/


/***** FOOTER *****/
#footer {
  background-color: $primaryColor !important;
}

/***** FOOTER *****/


/***** DOC LAYOUT *****/
@import 'sidebar-collapse';

.light header {
  box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.1);
}

#sidebar-collapse-icon {
  cursor: pointer;
}

#sidebar-collapse-icon.sidebar-collapsed {
  transform: rotate(180deg);
}

#sidebar-collapse-icon.sidebar-animated {
  @include sidebar-collapse-transition(transform);
}

#sidebar {
  position: fixed;
  top: 100px;
  bottom: 0;
  left: 0;
  width: 325px;
  overflow-x: hidden;
  overflow-y: scroll;
  height: calc(100vh - 100px);
  background: #002C5A;
  z-index: 301;
  padding: 0;
}

#sidebar.sidebar-collapsed {
  transform: translateX(calc(-75% - 12px)); // calculated from column ratios (9/12) and padding on sidebar header
  z-index: 299;
  overflow: hidden; // disable scrolling
}

#sidebar.sidebar-animated {
  @include sidebar-collapse-transition(transform);
}

#sidebar h5 {
  color: #fff !important;
}

#sidebar-header {
  background-color: $primaryColor;
  padding: 20px 0 20px 12px;
  margin-bottom: 20px;
}

#sidebar-header h4 {
  margin: 0 0 10px 0;
  font-weight: 700;
  color: #fff;
}

#wiki-nav {
  padding: 0 70px 0 20px;
}

#wiki-nav ul {
  list-style-type: none;
  padding-left: 10px;
}

#wiki-nav ul li {
  padding-bottom: 7px;
}

#wiki-main {
  padding: 16px;
  min-height: 92vh;
}

#wiki-main, #wiki-main.sidebar-collapsed {
  margin-left: 70px;
}

@media (min-width: 576px) {
  #wiki-main {
    padding: 32px 50px 130px 50px;
    margin-left: 325px;
  }
}

#wiki-main.sidebar-animated {
  @include sidebar-collapse-transition(margin-left);
}

#wiki-main h2 {
  margin-bottom: 20px !important;
}

#wiki-main h3 {
  margin-bottom: 16px !important;
}

.highlight pre {
  padding: 30px !important;
  background-color: #F6F8FA;
  border-radius: 6px !important;
}

.nc, .n {
  color: #d63384 !important;
}

.nf {
  color: #222ECF !important;
}

.contribution {
  box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

.wiki a.btn {
  padding: 8px 20px;
  border-radius: 50px;
  color: $primaryColor;
  font-size: 14px;
  border: 2px solid #47b2e4;
  font-weight: 600;
}

.wiki a.btn:hover {
  color: #fff !important;
  background-color: #47b2e4;;
}

.contribution a.btn {
  padding: 8px 20px;
  border-radius: 50px;
  color: $primaryColor;
  font-size: 14px;
  border: 2px solid #47b2e4;
  font-weight: 600;
  margin-bottom: 12px;
}

.contribution a.btn:hover {
  color: #fff !important;
  background-color: #47b2e4;;
}

.octicon {
  margin-right: 4px;
}

#footer {
  z-index: 300;
}

/***** DOC LAYOUT *****/


/***** POST LAYOUT *****/
.news {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.news header {
  box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.1);
}

.news .inner-page {
  margin-top: 90px;
  padding-bottom: 10px;
}

.inner-page + #related {
  padding-top: 0;
  padding-bottom: 90px;
}

/***** POST LAYOUT *****/
